<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="never">
    <title>风险域名管理</title>
<!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.3.6/vue.global.min.js" integrity="sha512-y5PnNJyq3UHlylzZhPzDDyrYC2pmfjBjlcaJL5fhzjj5EcUAYKeELoeCUT0Jc+r5IWzRgNGDE1XVxDAtkpdRlw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.3.6/vue.global.prod.min.js" integrity="sha512-jdvIV8HKyuo/emBQ2uZRiCaVRyxoZV7qRIffc6BSLgSVPwFvf3WL0RikITxGwuzJ3kGxiiCKB44Nz8YPdqnOSA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <style>
        /* Border styles */
        #table-3 thead, #table-3 tr {
            border-top-width: 1px;
            border-top-style: solid;
            border-top-color: rgb(235, 242, 224);
        }
        #table-3 {
            border-bottom-width: 1px;
            border-bottom-style: solid;
            border-bottom-color: rgb(235, 242, 224);
        }


        /* Padding and font style */
        #table-3 td, #table-3 th {
            padding: 5px 10px;
            font-size: 12px;
            font-family: Verdana;
            color: rgb(149, 170, 109);
        }


        /* Alternating background colors */
        #table-3 tr:nth-child(even) {
            background: rgb(230, 238, 214)
        }
        #table-3 tr:nth-child(odd) {
            background: #FFF
        }
    </style>
    <style>
        .site_img{
            object-fit: fill;
            transition: 0.2s;
            transform-origin: 0 0;
        }
        .site_img:hover{
            transform: scale(3);
        }
    </style>
</head>
<body>
<div id="app">
    <select v-model="query.white_black_state">
        <option value="">全部</option>
        <option value="-2">黑</option>
        <option value="-1">风险</option>
        <option value="1">未知</option>
        <option value="2">正常</option>
        <option value="3">白</option>
    </select>&nbsp;&nbsp;
    <select v-model="query.page_size">
        <option value="20">显示20条</option>
        <option value="100">显示100条</option>
        <option value="1000">显示1000条</option>
    </select>&nbsp;&nbsp;
    <span>合计：{{count}}条</span>&nbsp;&nbsp;
    <input @keyup.enter="search" placeholder="域名" v-model="query.domain_name">&nbsp;
    <input @keyup.enter="search" placeholder="链接" v-model="query.example_urls">&nbsp;
    <input @keyup.enter="search" placeholder="IP" v-model="query.domain_ips">&nbsp;
    <input @keyup.enter="search" placeholder="备案号" v-model="query.domain_icp">&nbsp;
    <input @keyup.enter="search" placeholder="主体" v-model="query.domain_org">&nbsp;
    <input @keyup.enter="search" placeholder="网站图片" v-model="query.site_imgs">&nbsp;
    <select v-model="query.port_check">
        <option value="">端口</option>
        <option value="-1">-</option>
        <option value="1">√</option>
        <option value="2">×</option>
    </select>&nbsp;
    <select v-model="query.abroad_check">
        <option value="">境外</option>
        <option value="-1">-</option>
        <option value="1">√</option>
        <option value="2">×</option>
    </select>&nbsp;
    <select v-model="query.tx_check">
        <option value="">TX</option>
        <option value="-1">-</option>
        <option value="1">√</option>
        <option value="2">×</option>
    </select>&nbsp;
    <select v-model="query.pic_check">
        <option value="">图像</option>
        <option value="-1">-</option>
        <option value="1">√</option>
        <option value="2">×</option>
    </select>&nbsp;
    <select v-model="query.caution">
        <option value="">留观</option>
        <option value="-1">否</option>
        <option value="1">是</option>
    </select>&nbsp;
    <button @click="search">搜索</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input placeholder="添加域名" v-model="site">&nbsp;
    <button @click="add(-2)">进黑</button>&nbsp;
    <button @click="add(-1)">进风险</button>&nbsp;
    <button @click="add(2)">进正常</button>&nbsp;
    <button @click="add(3)">进白</button>&nbsp;

    <table id="table-3" cellspacing="0" style="width: 2560px;text-align: center">
        <tr>
            <th>ID</th>
            <th>域名</th>
            <th>链接</th>
            <th>分类</th>
            <th>常驻</th>
            <th>IP</th>
            <th>备案</th>
            <th>主体</th>
            <th>网站图片</th>
            <th>端口</th>
            <th>境外</th>
            <th>TX</th>
            <th>图像</th>
            <th>拦截原因</th>
            <th>留观</th>
            <th>留观时间</th>
            <th>手动添加</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        <tr v-for="item in list" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.domain_name}}</td>
            <td style="max-width: 200px;">
                <a v-for="url in item.exampleUrls" :href="url" target="_blank" referrerpolicy="no-referrer" style="overflow: hidden;text-overflow: ellipsis;text-wrap: nowrap;display: block;">{{ url }}</a>
            <td :style="whiteBlackStyle(item.white_black_state)">{{whiteBlackState(item.white_black_state)}}</td>
            <td>{{boolState(item.persistent_in_client)}}</td>
            <td><pre>{{item.domain_ips?JSON.parse(item.domain_ips).map(x=>x.ip+x.loc).join('\n'):''}}</pre></td>
            <td>{{item.domain_icp}}</td>
            <td>{{item.domain_org}}</td>
            <td>
                <img class="site_img" referrerpolicy="no-referrer" width="100" height="100" v-if="item.siteImgs && item.siteImgs.length" :src="item.siteImgs[item.siteImgsPos]" @click="item.siteImgsPos=(++item.siteImgsPos)%item.siteImgs.length" :title="item.siteImgs[item.siteImgsPos]">
            </td>
            <td>{{checkState(item.port_check)}}</td>
            <td>{{checkState(item.abroad_check)}}</td>
            <td>{{checkState(item.tx_check)}}</td>
            <td>{{checkState(item.pic_check)}}</td>
            <td>{{item.block_reason}}</td>
            <td>{{boolState(item.caution)}}</td>
            <td>{{timeTrim(item.caution_time)}}</td>
            <td>{{boolState(item.manual_add)}}</td>
            <td :title="'更新时间'+timeTrim(item.modify_time)">{{timeTrim(item.create_time)}}</td>
            <td>
                <block v-if="item.delete_state!=1">
                    <button @click="del(item)">删除</button>
                    <button @click="change(item, -2)">黑</button>
                    <button @click="change(item, -1)">风险</button>
                    <button @click="change(item, 2)">正常</button>
                    <button @click="change(item, 3)">白</button>
                </block>
            </td>
        </tr>
    </table>
</div>

<script>
    const { createApp, ref } = Vue
    const apiPrefix = 'http://192.168.1.55:8080'
    createApp({
        setup() {
            const list = ref([])
            const count = ref(0)
            const domainName = ref('')
            const site = ref('')
            const query = ref({
                page_size: '20',
                white_black_state: '',
                domain_name: '',
                example_urls: '',
                domain_ips: '',
                domain_icp: '',
                domain_org: '',
                site_imgs: '',
                port_check: '',
                abroad_check: '',
                tx_check: '',
                pic_check: '',
                caution: ''
            })

            const search = () => {
                const q = [];
                for (const k in query.value) {
                    query.value[k] && q.push(k+'='+query.value[k]);
                }
                list.value = [];
                fetch(apiPrefix + '/admin/domain/list?'+q.join('&')).then(x=>x.json()).then(res=>{
                    res.list.forEach(
                        data => {
                            if (data.example_urls){
                                data.exampleUrls = data.example_urls.split("\n")

                            }

                            if (data.site_imgs){
                                data.siteImgs = data.site_imgs.split("\n");
                                var pos = data.siteImgs.findIndex(x=>x.includes('#score='))
                                if(pos === -1){
                                    pos = 0
                                }
                                data.siteImgsPos = pos;
                            }
                        }
                    )
                    list.value = res.list;
                    count.value = res.count;
                });
            }
            search();

            const whiteBlackState = state => {
                switch (state) {
                    case -2:
                        return '黑';
                    case -1:
                        return '风险';
                    case 1:
                        return '未知'
                    case 2:
                        return '正常'
                    case 3:
                        return '白'
                    default:
                        return state
                }
            };
            const boolState = state => {
                switch (state) {
                    case -1:
                        return '×'
                    case 1:
                        return '√'
                    default:
                        return state
                }
            };
            const checkState = state => {
                switch (state) {
                    case -1:
                        return '-'
                    case 1:
                        return '√'
                    case 2:
                        return '×'
                    default:
                        return state
                }
            }

            const timeTrim = t =>{
                return t?t.replace(/[TZ]/g, ' ').replace('+08:00',''):''
            }

            const whiteBlackStyle = state => {
                switch (state) {
                    case -2:
                        return 'color:red';
                    case -1:
                        return 'color:orange';
                }
                return ''
            }

            const del = item => {
                if(!confirm("确定要删除域名吗？"+item.domain_name)){
                    return
                }
                fetch(apiPrefix + '/admin/domain/del?domainName='+item.domain_name, {method:'post'}).then(r=>r.json()).then(r=>{
                    if(r.err){
                        return alert(r.err)
                    }
                    item.delete_state = 1
                })
            }

            const change = (item, newState) => {
                if(!confirm(item.domain_name + "确定修改为吗？" + whiteBlackState(newState))){
                    return
                }
                fetch(apiPrefix + '/admin/domain/change?domainName='+item.domain_name + '&tp='+newState, {method:'post'}).then(r=>r.json()).then(r=>{
                    if(r.err){
                        return alert(r.err)
                    }
                    search()
                })
            }

            const add = (tp) => {
                fetch(apiPrefix + '/admin/domain/add?site=' + encodeURIComponent(site.value) + '&tp='+tp, {method:'post'}).then(r=>r.json()).then(r=>{
                    if(r.err){
                        return alert(r.err)
                    }
                    site.value='';
                    search()
                })
            }

            return {
                list,
                count,
                whiteBlackState,
                boolState,
                checkState,
                timeTrim,
                whiteBlackStyle,
                domainName,
                search,
                del,
                change,
                site,
                add,
                query
            }
        }
    }).mount('#app')
</script>
</body>
</html>